<template>
  <div>
    <Card>
      <div class="search-com demo-spin-article">
        <h3 class="Ruleist-com">常见问题</h3>
        <div style="display: flex">
          <div class="menuCss">
            <div style="display: flex">
              <div>
                <div
                  v-if="this.commonProblemOneData.length == 0"
                  class="Menucss MenuItemCss"
                ></div>
                <div v-else>
                  <Menu
                    width="230px"
                    @on-select="MenuItclck"
                    class="Menucss MenuItemCss"
                  >
                    <MenuItem
                      class="MenuIspan"
                      v-for="item in commonProblemOneData"
                      :key="item"
                      :name="item.id"
                    >
                      {{ item.categoryMess }}
                    </MenuItem>
                  </Menu>
                </div>
              </div>
              <div>
                <div
                  v-if="this.commonProblemTwoData.length == 0"
                  class="Menucss MenuItemCss"
                ></div>
                <div v-else>
                  <Menu
                    width="230px"
                    @on-select="MenuIsecond"
                    class="Menucss MenuItemCss"
                  >
                    <MenuItem
                      class="MenuIspan"
                      v-for="item in commonProblemTwoData"
                      :key="item"
                      :name="item.id"
                    >
                      {{ item.custMess }}
                    </MenuItem>
                  </Menu>
                </div>
              </div>
              <div v-show="iframeShow">
                <div class="iframeCss">
                  <iframe
                    style="border: 0"
                    :src="this.htmls"
                    height="540"
                    width="800"
                    name="demo"
                    scrolling="auto"
                    sandbox="allow-same-origin"
                  ></iframe>
                </div>
              </div>
            </div>
          </div>
        </div>
        <Spin size="large" fix v-if="spinShow"></Spin>
      </div>
    </Card>
  </div>
</template>

<script>
import { getPlatformRulesId } from "@/api/index";
import {
  getMsgCustCategoryList,
  getMsgCustMessIdList,
} from "@/api/ownerEnd/personalCenter";

import { getStore } from "@/libs/storage";
export default {
  data() {
    return {
      Ruletitle: "",
      Ruleimod: false,
      searchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      ruleList: [],
      header: {
        "content-type": "multipart/form-data",
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      htmls: "",
      commonProblemOneData: [],
      commonProblemTwoData: [],
      iframeShow: true,
      spinShow: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.commonProblemOne();
    },
    // 常见问题一
    commonProblemOne() {
      this.spinShow = true;
      getMsgCustCategoryList().then((res) => {
        this.spinShow = false;
        if (res.code == 200) {
          this.commonProblemOneData = res.result.content;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 一级
    MenuItclck(val) {
      this.spinShow = true;
      this.iframeShow = false;
      getMsgCustMessIdList({ msgCustCategoryId: val }).then((res) => {
        this.spinShow = false;
        if (res.code == 200) {
          this.commonProblemTwoData = res.result.content;
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 常见问题二
    MenuIsecond(val) {
      this.iframeShow = true;
      this.commonProblemTwoData.forEach((item) => {
        if (item.id == val) {
          this.htmls = this.$baseUrl + item.replayMess;
        }
      });
    },
  },
};
</script>

<style lang="less">
.box {
  width: 100%;
  height: 730px;
}
.provisions {
  display: flex;
  // justify-content
}
.ruleListitem {
  display: inline-block;
  line-height: 58px;
  cursor: pointer;
  font-size: 15px;
}
.but {
  display: flex;
}
.rulesss {
  width: 100%;
  border-bottom: 1px solid #dedede;
  span {
    color: #39394d;
    text-decoration: none;
    display: inline-block;
    line-height: 38px;
    font-size: 14px;
  }
}
.box {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.search-com {
  // padding: 10px 20px;
  width: 100%;
  height: 49rem !important;
  overflow: auto;
}
.Ruleist-com {
  margin-top: 15px;
  font-size: 20px;
  color: #39394d;
  z-index: 999;
  margin-left: 18px;
}
.RuleLis {
  .ivu-modal-header-inner {
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    font-weight: 700;
  }
  .ivu-modal-content {
    .ivu-modal-header {
      border: 0;
    }
  }
  .ivu-modal-footer {
    border: 0;
  }
  .ivu-modal-body {
    padding: 0 30px;
  }
}
.menuCss {
  margin-top: 10px;
  margin-left: -23px;
  width: 300px;
}
.iframeCss {
  margin-left: 50px;
}
.MenuItemCss {
  margin-left: 1rem;
}
</style>